74. Araxis Merge File Comparison Report

Produced by Araxis Merge on 2022-11-18 03:12:08 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.

74.1 Files compared

#LocationFileLast Modified
1Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2021-02-15 04:15:52 +0000
2Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto/Magento_Checkout/web/css/source/module_minicart.less2021-02-15 04:15:52 +0000

74.2 Comparison summary

DescriptionBetween
Files 1 and 2
Text BlocksLines
Unchanged1776
Changed00
Inserted00
Removed00

74.3 Comparison options

WhitespaceConsecutive whitespace is treated as a single space
Character caseDifferences in character case are significant
Line endingsDifferences in line endings (CR and LF characters) are ignored
CR/LF charactersNot shown in the comparison detail
Active line-pairing rules

74.4 Active regular expressions

No regular expressions were active.

74.5 Comparison detail

1 // /** 1 // /**
2 //  * Copyright © 2015 Magento. All rights reserved. 2 //  * Copyright © 2015 Magento. All rights reserved.
3 //  * See COPYING.txt for license details. 3 //  * See COPYING.txt for license details.
4 //  */ 4 //  */
5  5 
6 // 6 //
7 //  Variables 7 //  Variables
8 //  _____________________________________________ 8 //  _____________________________________________
9  9 
10 @minicart__padding-horizontal: @indent__base; 10 @minicart__padding-horizontal: @indent__base;
11  11 
12 @minicart-qty__height: 24px; 12 @minicart-qty__height: 24px;
13  13 
14 // 14 //
15 //  Common 15 //  Common
16 //  _____________________________________________ 16 //  _____________________________________________
17  17 
18 & when (@media-common = true) { 18 & when (@media-common = true) {
19  19 
20     // 20     //
21     //  Minicart 21     //  Minicart
22     //  --------------------------------------------- 22     //  ---------------------------------------------
23  23 
24     .block-minicart { 24     .block-minicart {
25         .items-total { 25         .items-total {
26             float: right; 26             float: right;
27             .count { 27             .count {
28                 font-weight: @font-weight__bold; 28                 font-weight: @font-weight__bold;
29                 color: #000; 29                 color: #000;
30             } 30             }
31         } 31         }
32         .subtotal { 32         .subtotal {
33             text-align: left; 33             text-align: left;
34             .label { 34             .label {
35                 &:extend(.abs-colon all); 35                 &:extend(.abs-colon all);
36             } 36             }
37         } 37         }
38         .subtitle { 38         .subtitle {
39             display: none; 39             display: none;
40             &.empty { 40             &.empty {
41                 display: block; 41                 display: block;
42                 padding: 18px 0; 42                 padding: 18px 0;
43                 text-align: center; 43                 text-align: center;
44                 font-size: inherit; 44                 font-size: inherit;
45                 font-weight: 400; 45                 font-weight: 400;
46             } 46             }
47         } 47         }
48         .text { 48         .text {
49             &.empty { 49             &.empty {
50                 text-align: center; 50                 text-align: center;
51             } 51             }
52         } 52         }
53         .block-content { 53         .block-content {
54             > .actions { 54             > .actions {
55                 > .secondary { 55                 > .secondary {
56                     text-align: center; 56                     text-align: center;
57                     margin: 0 0 15px; 57                     margin: 0 0 15px;
58                     .action { 58                     .action {
59                         &.viewcart { 59                         &.viewcart {
60                             display: block; 60                             display: block;
61                             width: 100%; 61                             width: 100%;
62                             padding: 10px 15px; 62                             padding: 10px 15px;
63                             text-transform: uppercase; 63                             text-transform: uppercase;
64                             font-size: 15px; 64                             font-size: 15px;
65                             border: 1px solid #ccc; 65                             border: 1px solid #ccc;
66                             border-radius: 3px; 66                             border-radius: 3px;
67                         } 67                         }
68                     } 68                     }
69                 } 69                 }
70                 .paypal-logo { 70                 .paypal-logo {
71                     margin-top: 15px; 71                     margin-top: 15px;
72                     text-align: center; 72                     text-align: center;
73                 } 73                 }
74             } 74             }
75         } 75         }
76         .block-category-link, 76         .block-category-link,
77         .block-product-link, 77         .block-product-link,
78         .block-cms-link, 78         .block-cms-link,
79         .block-banners { 79         .block-banners {
80             margin: 15px 0 0; 80             margin: 15px 0 0;
81             text-align: center; 81             text-align: center;
82         } 82         }
83     } 83     }
84  84 
85     .minicart-wrapper { 85     .minicart-wrapper {
86         .lib-dropdown( 86         .lib-dropdown(
87             @_toggle-selector: ~".action.showcart", 87             @_toggle-selector: ~".action.showcart",
88             @_options-selector: ~".block-minicart", 88             @_options-selector: ~".block-minicart",
89             @_dropdown-toggle-icon-content: @icon-mini-cart, 89             @_dropdown-toggle-icon-content: @icon-mini-cart,
90             @_dropdown-toggle-active-icon-content: @icon-mini-cart, 90             @_dropdown-toggle-active-icon-content: @icon-mini-cart,
91             @_dropdown-list-item-padding: false, 91             @_dropdown-list-item-padding: false,
92             @_dropdown-list-item-hover: false, 92             @_dropdown-list-item-hover: false,
93             @_dropdown-list-margin-top: 7px, 93             @_dropdown-list-margin-top: 7px,
94             @_dropdown-list-border: 0, 94             @_dropdown-list-border: 0,
95             @_dropdown-list-pointer-position-top: -21px, 95             @_dropdown-list-pointer-position-top: -21px,
96             @_icon-font-position: before, 96             @_icon-font-position: before,
97             @_icon-font-size: 26px, 97             @_icon-font-size: 26px,
98             @_icon-font-line-height: 33px, 98             @_icon-font-line-height: 33px,
99             @_icon-font-color: @minicart-icons-color, 99             @_icon-font-color: @minicart-icons-color,
100             @_icon-font-color-hover: @minicart-icons-color-hover, 100             @_icon-font-color-hover: @minicart-icons-color-hover,
101             @_icon-font-color-active: @minicart-icons-color 101             @_icon-font-color-active: @minicart-icons-color
102         ); 102         );
103         .block-minicart { 103         .block-minicart {
104             .lib-css(padding, 15px @minicart__padding-horizontal); 104             .lib-css(padding, 15px @minicart__padding-horizontal);
105             width: 300px; 105             width: 300px;
106             right: 0; 106             right: 0;
107             color: #222529; 107             color: #222529;
108             top: 100%; 108             top: 100%;
109             margin-top: 13px; 109             margin-top: 13px;
110             right: 0; 110             right: 0;
111             box-shadow: 0 5px 8px rgba(0,0,0,.15); 111             box-shadow: 0 5px 8px rgba(0,0,0,.15);
112             .block-title { 112             .block-title {
113                 display: none; 113                 display: none;
114             } 114             }
115             &:before, &::after {display: none;} 115             &:before, &::after {display: none;}
116         } 116         }
117         .product { 117         .product {
118             .actions { 118             .actions {
119                 > .primary, 119                 > .primary,
120                 > .secondary { 120                 > .secondary {
121                     display: inline; 121                     display: inline;
122                 } 122                 }
123             } 123             }
124         } 124         }
125         .action { 125         .action {
126             &.close { 126             &.close {
127                 width: 40px; 127                 width: 40px;
128                 height: 40px; 128                 height: 40px;
129                 top: 0; 129                 top: 0;
130                 right: 0; 130                 right: 0;
131                 position: absolute; 131                 position: absolute;
132                 .lib-button-reset(); 132                 .lib-button-reset();
133                 .lib-button-icon( 133                 .lib-button-icon(
134                     @icon-remove, 134                     @icon-remove,
135                     @_icon-font-color: #777, 135                     @_icon-font-color: #777,
136                     @_icon-font-size: 16px, 136                     @_icon-font-size: 16px,
137                     @_icon-font-line-height: 16px, 137                     @_icon-font-line-height: 16px,
138                     @_icon-font-text-hide: true 138                     @_icon-font-text-hide: true
139                 ); 139                 );
140             } 140             }
141             &.showcart { 141             &.showcart {
142                 white-space: nowrap; 142                 white-space: nowrap;
143                 display: flex; 143                 display: flex;
144                 align-items: center; 144                 align-items: center;
145                 position: relative; 145                 position: relative;
146                 &.active { 146                 &.active {
147                   display: flex; 147                   display: flex;
148                   align-items: center; 148                   align-items: center;
149                   .minicart-icon { 149                   .minicart-icon {
150                     &::after { 150                     &::after {
151                       content: ""; 151                       content: "";
152                       border-width: 1px 1px 0 0; 152                       border-width: 1px 1px 0 0;
153                       border-color: #f4f4f4; 153                       border-color: #f4f4f4;
154                       border-style: solid; 154                       border-style: solid;
155                       background: #fff; 155                       background: #fff;
156                       width: 14px; 156                       width: 14px;
157                       height: 14px; 157                       height: 14px;
158                       position: absolute; 158                       position: absolute;
159                       top: calc(100%); 159                       top: calc(100%);
160                       left: 50%; 160                       left: 50%;
161                       margin-top: 8px; 161                       margin-top: 8px;
162                       margin-left: -7px; 162                       margin-left: -7px;
163                       transform: rotate(-45deg); 163                       transform: rotate(-45deg);
164                       z-index: 1004; 164                       z-index: 1004;
165                       animation: arrowFadeInDown .2s ease-out; 165                       animation: arrowFadeInDown .2s ease-out;
166                     } 166                     }
167                   } 167                   }
168                 } 168                 }
169                 .minicart-icon { 169                 .minicart-icon {
170                   font-size: 26px; 170                   font-size: 26px;
171                   position: relative; 171                   position: relative;
172                   &::before {margin: 0;} 172                   &::before {margin: 0;}
173                 } 173                 }
174                 .text { 174                 .text {
175                     &:extend(.abs-visually-hidden all); 175                     &:extend(.abs-visually-hidden all);
176                 } 176                 }
177                 .counter.qty { 177                 .counter.qty {
178                     color: @minicart__qty_color; 178                     color: @minicart__qty_color;
179                     position: absolute; 179                     position: absolute;
180                     right: 18px; 180                     right: 18px;
181                     top: -5px; 181                     top: -5px;
182                     font-size: 10px; 182                     font-size: 10px;
183                     font-weight: 600; 183                     font-weight: 600;
184                     text-align: center; 184                     text-align: center;
185                     width: 16px; 185                     width: 16px;
186                     height: 16px; 186                     height: 16px;
187                     line-height: 16px; 187                     line-height: 16px;
188                     border-radius: 8px; 188                     border-radius: 8px;
189                     overflow: hidden; 189                     overflow: hidden;
190                     color: #fff; 190                     color: #fff;
191                     background-color: #ff5b5b; 191                     background-color: #ff5b5b;
192                     padding: 0; 192                     padding: 0;
193                     .loader { 193                     .loader {
194                         > img { 194                         > img {
195                             .lib-css(max-width, @minicart-qty__height); 195                             .lib-css(max-width, @minicart-qty__height);
196                         } 196                         }
197                     } 197                     }
198                 } 198                 }
199                 .counter-label { 199                 .counter-label {
200                     &:extend(.abs-visually-hidden all); 200                     &:extend(.abs-visually-hidden all);
201                 } 201                 }
202                 &:before, &.active:before { 202                 &:before, &.active:before {
203                     color: @minicart__icon_color; 203                     color: @minicart__icon_color;
204                     line-height: 40px; 204                     line-height: 40px;
205                     margin: 0; 205                     margin: 0;
206                     display: none; 206                     display: none;
207                 } 207                 }
208                 &:hover:before, &:active:before, &.active:before, &.active:hover:before { 208                 &:hover:before, &:active:before, &.active:before, &.active:hover:before {
209                     color: @minicart__icon_color; 209                     color: @minicart__icon_color;
210                 } 210                 }
211                 &::after { 211                 &::after {
212                   content: "\e81c"; 212                   content: "\e81c";
213                   font-family: 'porto-icons'; 213                   font-family: 'porto-icons';
214                   font-size: 17px; 214                   font-size: 17px;
215                   margin-left: 15px; 215                   margin-left: 15px;
216                   display: block; 216                   display: block;
217                 } 217                 }
218             } 218             }
219         } 219         }
220         .minicart-widgets { 220         .minicart-widgets {
221             padding: 0 10px 0; 221             padding: 0 10px 0;
222         } 222         }
223     } 223     }
224     .cart-design-2 { 224     .cart-design-2 {
225       .action { 225       .action {
226         &.showcart { 226         &.showcart {
227           .minicart-icon { 227           .minicart-icon {
228             width: 25px; 228             width: 25px;
229             height: 20px; 229             height: 20px;
230             border: 2px solid #222529; 230             border: 2px solid #222529;
231             border-radius: 0 0 5px 5px; 231             border-radius: 0 0 5px 5px;
232             position: relative; 232             position: relative;
233             opacity: 1; 233             opacity: 1;
234             margin: 6px 3px 0; 234             margin: 6px 3px 0;
235             font-size: 32px; 235             font-size: 32px;
236             &::before { 236             &::before {
237               content: ''; 237               content: '';
238               position: absolute; 238               position: absolute;
239               border: 2px solid; 239               border: 2px solid;
240               border-color: inherit; 240               border-color: inherit;
241               border-bottom: none; 241               border-bottom: none;
242               border-radius: 10px 10px 0 0; 242               border-radius: 10px 10px 0 0;
243               left: 50%; 243               left: 50%;
244               top: -8px; 244               top: -8px;
245               margin-left: -7.5px; 245               margin-left: -7.5px;
246               width: 15px; 246               width: 15px;
247               height: 11px; 247               height: 11px;
248             } 248             }
249           } 249           }
250         } 250         }
251       } 251       }
252     } 252     }
253     .minicart-items-wrapper { 253     .minicart-items-wrapper {
254         overflow-x: auto; 254         overflow-x: auto;
255     } 255     }
256  256 
257     .minicart-items { 257     .minicart-items {
258         .lib-list-reset-styles(); 258         .lib-list-reset-styles();
259         .product-item { 259         .product-item {
260             > .product { 260             > .product {
261                 &:extend(.abs-add-clearfix all); 261                 &:extend(.abs-add-clearfix all);
262             } 262             }
263         } 263         }
264         .product-image-wrapper { 264         .product-image-wrapper {
265             &:extend(.abs-reset-image-wrapper all); 265             &:extend(.abs-reset-image-wrapper all);
266         } 266         }
267         .product-item-pricing { 267         .product-item-pricing {
268             .label { 268             .label {
269                 display: inline-block; 269                 display: inline-block;
270             } 270             }
271         } 271         }
272         .price-minicart { 272         .price-minicart {
273             margin-bottom: @indent__xs; 273             margin-bottom: @indent__xs;
274         } 274         }
275         .product-item-details { 275         .product-item-details {
276             text-align: left; 276             text-align: left;
277             .price-including-tax, 277             .price-including-tax,
278             .price-excluding-tax { 278             .price-excluding-tax {
279                 margin: @indent__xs 0; 279                 margin: @indent__xs 0;
280             } 280             }
281             .weee[data-label] { 281             .weee[data-label] {
282                 .lib-font-size(11); 282                 .lib-font-size(11);
283                 .label { 283                 .label {
284                     &:extend(.abs-no-display all); 284                     &:extend(.abs-no-display all);
285                 } 285                 }
286             } 286             }
287             .details-qty { 287             .details-qty {
288                 margin-top: @indent__s; 288                 margin-top: @indent__s;
289             } 289             }
290         } 290         }
291         .product { 291         .product {
292             > .product-item-photo, 292             > .product-item-photo,
293             > .product-image-container { 293             > .product-image-container {
294                 float: left; 294                 float: left;
295                 min-width: 0; 295                 min-width: 0;
296             } 296             }
297             .toggle { 297             .toggle {
298                 &:after { 298                 &:after {
299                     position: static; 299                     position: static;
300                     margin: 0 0 0 @indent__xs; 300                     margin: 0 0 0 @indent__xs;
301                     .lib-css(color, @color-gray56); 301                     .lib-css(color, @color-gray56);
302                 } 302                 }
303                 border: 0; 303                 border: 0;
304                 padding: 0 @indent__xl @indent__xs 0; 304                 padding: 0 @indent__xl @indent__xs 0;
305             } 305             }
306             .product.options { 306             .product.options {
307                 > .toggle { 307                 > .toggle {
308                     &:after { 308                     &:after {
309                         font-family: @icon-font-family; 309                         font-family: @icon-font-family;
310                     } 310                     }
311                     .lib-icon-font-symbol( 311                     .lib-icon-font-symbol(
312                         @_icon-font-content: @icon-down, 312                         @_icon-font-content: @icon-down,
313                         @_icon-font-position: after 313                         @_icon-font-position: after
314                     ); 314                     );
315                 } 315                 }
316                 &.active { 316                 &.active {
317                     > .toggle { 317                     > .toggle {
318                         .lib-icon-font-symbol( 318                         .lib-icon-font-symbol(
319                             @_icon-font-content: @icon-up, 319                             @_icon-font-content: @icon-up,
320                             @_icon-font-position: after 320                             @_icon-font-position: after
321                         ); 321                         );
322                     } 322                     }
323                 } 323                 }
324             } 324             }
325             &.pricing { 325             &.pricing {
326                 margin-top: 3px; 326                 margin-top: 3px;
327             } 327             }
328             &.options { 328             &.options {
329                 .tooltip.toggle { 329                 .tooltip.toggle {
330                     .lib-icon-font( 330                     .lib-icon-font(
331                         @icon-down, 331                         @icon-down,
332                         @_icon-font-size: 12px, 332                         @_icon-font-size: 12px,
333                         @_icon-font-line-height: 12px, 333                         @_icon-font-line-height: 12px,
334                         @_icon-font-text-hide: true, 334                         @_icon-font-text-hide: true,
335                         @_icon-font-margin: -3px 0 0 7px, 335                         @_icon-font-margin: -3px 0 0 7px,
336                         @_icon-font-position: after 336                         @_icon-font-position: after
337                     ); 337                     );
338                 } 338                 }
339                 .details { 339                 .details {
340                     display: none; 340                     display: none;
341                 } 341                 }
342             } 342             }
343         } 343         }
344         .details-qty, 344         .details-qty,
345         .price-minicart { 345         .price-minicart {
346             .label { 346             .label {
347                 &:extend(.abs-colon all); 347                 &:extend(.abs-colon all);
348             } 348             }
349         } 349         }
350         .item-qty { 350         .item-qty {
351             width: 40px; 351             width: 40px;
352             text-align: center; 352             text-align: center;
353             margin-right: @indent__s; 353             margin-right: @indent__s;
354             border-radius: 3px; 354             border-radius: 3px;
355         } 355         }
356         .update-cart-item { 356         .update-cart-item {
357             vertical-align: top; 357             vertical-align: top;
358             .lib-font-size(11); 358             .lib-font-size(11);
359         } 359         }
360         .subtitle { 360         .subtitle {
361             display: none; 361             display: none;
362         } 362         }
363     } 363     }
364  364 
365 } 365 }
366  366 
367 // 367 //
368 //  Mobile 368 //  Mobile
369 //  _____________________________________________ 369 //  _____________________________________________
370  370 
371 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 371 .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
372     .minicart-wrapper .block-minicart { 372     .minicart-wrapper .block-minicart {
373         width: 290px; 373         width: 290px;
374     } 374     }
375 } 375 }
376  376 
377 // 377 //
378 //  Desktop 378 //  Desktop
379 //  _____________________________________________ 379 //  _____________________________________________
380  380 
381 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 381 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
382     .minilist .action.delete, 382     .minilist .action.delete,
383     .minicart-wrapper .action.edit { 383     .minicart-wrapper .action.edit {
384         .lib-icon-font-size( 384         .lib-icon-font-size(
385             @_icon-font-size: 16px 385             @_icon-font-size: 16px
386         ); 386         );
387     } 387     }
388 } 388 }